<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, initial-scale=1, shrink-to-fit=no">
    <div th:replace="~{admin/common :: common-link}"></div>
    <style>
        .color-turquoise {
            background-color: #1ABC9C;
            color: #fff;
        }

        .color-emerald {
            background-color: #2ECC71;
            color: #fff;
        }

        .color-peter-river {
            background-color: #3498DB;
            color: #fff;
        }

        .color-amethyst {
            background-color: #9B59B6;
            color: #fff;
        }

        .color-wet-asphalt {
            background-color: #34495E;
            color: #fff;
        }

        .color-sun-flower {
            background-color: #F1C40F;
            color: #fff;
        }

        .color-carrot {
            background-color: #E67E22;
            color: #fff;
        }

        .color-alizarin {
            background-color: #E74C3C;
            color: #fff;
        }

        .color-clouds {
            background-color: #ECF0F1;
            color: #bdc3c7;
        }

        .color-concrete {
            background-color: #95A5A6;
            color: #fff;
        }

        .bg-color-items {
            list-style-type: none;
            margin: 0;
            padding: 0;
            cursor: pointer;
        }

        .bg-color-items li {
            float: left;
            padding: 0 10px;
        }

        .bg-color {
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
        }
    </style>
</head>
<body>

<div class="content">
    <div class="block block-fx-shadow">
        <div class="block-content">
            <div class="row justify-content-center py-20">
                <div class="col-xl-6">
                    <form id="saveForm" th:action="@{${baseUrl} + '/edit.json'}" th:object="${vo}">
                        <input type="hidden" name="id" th:field="*{id}">
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label" for="title">网站名称 <span class="text-danger">*</span></label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" id="title" name="title" th:field="*{title}" placeholder="网站名称" data-bv-notempty="true" data-bv-notempty-message="网站名称不能为空">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label" for="homeUrl">主页地址 <span class="text-danger">*</span></label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" id="homeUrl" name="homeUrl" th:field="*{homeUrl}" placeholder="主页地址" data-bv-notempty="true" data-bv-notempty-message="主页地址不能为空">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label" for="logo">头像/Logo</label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" id="logo" name="logo" placeholder="logo" th:field="*{logo}">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label" for="linkType">链接类型 </label>
                            <div class="col-lg-10">
                                <select class="custom-select" id="linkType" name="linkType" th:field="*{linkType}">
                                    <option value="1">博客网址</option>
                                    <option value="2">常用网址</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label" for="sort">排序 </label>
                            <div class="col-lg-10">
                                <input type="number" class="form-control" id="sort" name="sort" th:field="*{sort}" placeholder="排序">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label" for="remark">描述 </label>
                            <div class="col-lg-10">
                                <textarea id="remark" name="remark" class="form-control" th:field="*{remark}" aria-label="With textarea" style="resize: none" placeholder="描述"></textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label" for="backgroundColor">背景颜色 </label>
                            <div class="col-lg-10">
                                <ul class="bg-color-items">
                                    <li data-color="#1ABC9C"><span class="bg-color color-turquoise"></span></li>
                                    <li data-color="#2ECC71"><span class="bg-color color-emerald"></span></li>
                                    <li data-color="#3498DB"><span class="bg-color color-peter-river"></span></li>
                                    <li data-color="#9B59B6"><span class="bg-color color-amethyst"></span></li>
                                    <li data-color="#34495E"><span class="bg-color color-wet-asphalt"></span></li>
                                    <li data-color="#F1C40F"><span class="bg-color color-sun-flower"></span></li>
                                    <li data-color="#E67E22"><span class="bg-color color-carrot"></span></li>
                                    <li data-color="#E74C3C"><span class="bg-color color-alizarin"></span></li>
                                    <li data-color="#ECF0F1"><span class="bg-color color-clouds"></span></li>
                                    <li data-color="#95A5A6"><span class="bg-color color-concrete"></span></li>
                                </ul>
                                <input type="text" class="form-control" id="backgroundColor" name="backgroundColor" placeholder="背景颜色" th:field="*{backgroundColor}">
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-lg-12 text-center">
                                <button type="reset" class="btn btn-secondary">重置</button>
                                <button type="submit" class="btn btn-primary" id="submitBtn">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="~{admin/common :: common-script}"></div>
<script type="text/javascript" th:inline="javascript">
    $(function(){
        $("#submitBtn").on("click", function () {
            $.hexo.action.save("saveForm");
        });

        $(".bg-color-items").find("li").on("click", function () {
            $("#backgroundColor").val($(this).data("color"));
        });

    });
</script>
</body>
</html>